<template>
    <div>
        <h4>{{category.title}} | {{category.name}}</h4>
        <el-tabs v-model="platform">
            <el-tab-pane label="全部" name="all">
                <rooms :rooms="allRooms"></rooms>
            </el-tab-pane>
            <el-tab-pane v-for="item in platforms" :label="item.title" :name="item.name" :key="item.name">
                <rooms :rooms="item.rooms"></rooms>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "RoomList",
        data() {
            return {
                platform: 'douyu',
            }
        },
        computed:{
            allRooms(){
                let rooms = [];
                this.platforms.map((platform)=>{
                    rooms = rooms.concat(platform.rooms)
                });
                rooms = rooms.sort((x,y)=>{
                    return y.pop - x.pop
                });
                return rooms
            }
        },
        props: ['platforms', 'category']
    }
</script>